<template>
	<view class="LimitedSeckillBox">
		<view class="topBox">
			<image src="../../static/banner_miaosha.png" mode="widthFix" class="topImg"></image>
			<view class="time">01/01--11/11</view>
		</view>
		<view v-for=" i in 10" :key="i" class="ListBox">
			<view class="cont ">
				<view class="imgBox"><image src="../../static/img_03.png" mode="widthFix"></image></view>
				<view class="contInfo">
					<view class="title">课程名称 课程名称 课程名称 课程名称 课程名称课程名称课程名称课程名称</view>
					<view class="price">原价¥89.00</view>
					<view class="hotPeople flex_center">
						<image src="../../static/icon_people_red.png" mode="widthFix" class="hotImg"></image>
						<text>92231人疯抢</text>
					</view>
				</view>
			</view>
			<view class="footer justify_between">
				<view class="progressBox" >
					<view class="proTitle">红包疯抢中</view>
					<progress class="progress" percent="60" stroke-width="10" :active="true" activeColor="#f4173e" backgroundColor="#ffd0d2" :show-info="false"/>
				</view>
				<view class="btnBox">
					<view class="btn">抢红包</view>
					<image src="../../static/img_rob.png" mode="widthFix" class="redImg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
.LimitedSeckillBox {
	image {
		display: block;
	}
	.topBox {
		position: relative;
		.topImg {
			width: 100%;
		}
		.time {
			position: absolute;
			left: 210rpx;
			top: 220rpx;
			color: #dc5c32;
		}
	}
	.ListBox {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.cont {
			display: flex;
			align-items:flex-start;
			.imgBox {
				width: 800rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
								overflow: hidden;
				image {
					width: 100%;
				}
			}
			.contInfo {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 1.2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					height: 72rpx;
				}
				.price {
					text-decoration:line-through;
					color: #666;
					font-size: 28rpx;
					margin: 10rpx 0;
				}
				.hotPeople {
					.hotImg {
						width: 30rpx;
						margin-right: 20rpx;
					}
					text {
						font-size: 32rpx;
					}
				}
			}
		}
		.footer {
			.progressBox {
				width: 42%;
				.proTitle {
					font-size: 36rpx;
					font-weight: bold;
					font-family: "Times New Roman",Georgia,Serif;;
				}
				.progress {
					border-radius: 20rpx;
					overflow: hidden;
				}
			}
			.btnBox {
				width: 54%;
				height: 80rpx;
				position: relative;
				.btn {
					width: 100%;
					height: 100%;
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					border-radius: 20rpx;
					background: linear-gradient(to right, #f20b47 , #f9361c);
				}
				.redImg {
					position: absolute;
					right: 10px;
					top: -40rpx;
					width: 80rpx;
				}
			}
		}
	}
}
</style>
